<template>
<div class="header">
  <div class="back">
    <span class="iconfont" ref="back">&#xe624;</span>
  </div>
  <div class="search">
    <span class="iconfont">&#xe632;</span>
    <span>输入城市/景点/游玩主题</span>
  </div>
  <router-link to="city">
    <div class="city">
      {{ this.city }}<span class="iconfont">&#xe614;</span>
    </div>
  </router-link>
</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@style/variables.styl'
  .header
    height: $header
    background: $bgcolor
    display: flex
    align-items: center
    color: #fff
    .back
      margin-left: .16rem
    .search
      flex-grow: 1
      padding-left: .1rem
      margin-left: .26rem
      margin-right: .2rem
      height: .6rem
      line-height: .56rem
      background: #fff
      border-radius: .08rem
      color: #ccc
    .city
      span
        display: inline-block
        margin-left: .1rem
        margin-right: .2rem
        font-size: .2rem
</style>
